<template>
	<loading-wait v-if="loading" ></loading-wait>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			举报详情
		</view>
		<view class=""  v-if="!loading" >
			<view class="base-box">
				<view class="base">
					<u-table class="u-table-basic"  align="left">
						<u-tr style="" >
							<u-th class="u-table-th bold" align="left" >
								基础信息
							</u-th>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								项目名称
							</u-td>
							<u-td class="u-table-td "  >
								{{data.item.title}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								订单时间
							</u-td>
							<u-td class="u-table-td "  >
								{{data.item.time}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								订单数量
							</u-td>
							<u-td class="u-table-td "  >
								{{data.item.number}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								订单单价
							</u-td>
							<u-td class="u-table-td "  >
								￥{{ (data.item.price /100).toFixed(2) }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								订单总价
							</u-td>
							<u-td class="u-table-td "  >
								￥{{ (data.item.total /100).toFixed(2) }}
							</u-td>
						</u-tr>
						
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								用户名称
							</u-td>
							<u-td class="u-table-td "  >
								{{data.userinfo.name}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								技师名称
							</u-td>
							<u-td class="u-table-td "  >
								{{data.technician.name}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								技师手机号码
							</u-td>
							<u-td class="u-table-td "  >
								{{ initMobile(data.technician.mobile )}}
							</u-td>
						</u-tr>
						
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								评论内容
							</u-td>
							<u-td class="u-table-td "  >
								{{data.content}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								订单号
							</u-td>
							<u-td class="u-table-td "  >
								{{data.order_no}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								服务态度评分
							</u-td>
							<u-td class="u-table-td "  >
								{{(data.stance / 10).toFixed(1)}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								服务水平评分
							</u-td>
							<u-td class="u-table-td "  >
								{{(data.level / 10).toFixed(1)}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								是否额外收费
							</u-td>
							<u-td class="u-table-td "  >
								{{data.is_extra?'有额外收费':'无额外收费'}}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								额外收费金额
							</u-td>
							<u-td class="u-table-td "  >
								￥{{ (data.extra_price /100).toFixed(2) }}
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								IP地址
							</u-td>
							<u-td class="u-table-td "  >
								{{data.create_ip}}
							</u-td>
						</u-tr>
						
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								创建时间
							</u-td>
							<u-td class="u-table-td"  >
								<uni-dateformat :date="data.create_date" ></uni-dateformat>
							</u-td>
						</u-tr>
					</u-table>
				</view>
				<view class="base">
					<u-table class="u-table-basic"  align="left" >
						<u-tr style="" >
							<u-th class="u-table-th bold" align="left" >
								图片信息
							</u-th>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								用户头像
							</u-td>
							<u-td class="u-table-td "  >
								<view class="flex-layout">
									<u-image width="40px" height="40px" :src="data.userinfo.head_image"
										@click="eventImage(data.userinfo.head_image)"></u-image>
								</view>
							</u-td>
						</u-tr>
						<u-tr  class="u-table-tr" >
							<u-td class="u-table-td bold" width="104px" >
								项目图片
							</u-td>
							<u-td class="u-table-td "  >
								<view class="flex-layout">
									<u-image width="100px" height="70px" :src="data.item.image"
										@click="eventImage(data.item.image)"></u-image>
								</view>
							</u-td>
						</u-tr>
						
					</u-table>
				</view>
			</view>
			<view class="util-button">
				
				<view class="">
					<u-button type="info" size="mini" @click="onBack" >
						返回列表
					</u-button>
				</view>
			</view>
		</view>
	</view>
	<u-toast ref="uToast" ></u-toast>
	
</template>

<script>
	import {onStepValue} from "/common/js_file/user-list.js" ;
	import Util from "/common/util/util.js";
	const global = uniCloud.importObject("global",{customUI:true});
	export default {
		data() {
			return {
				loading:true,
				uid:'',
				data:{},
				showReport:false,
				content:"",
				addressData:[],// 地址信息
			}
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
			}else{
				this.$refs.uToast.show({
					title: '环境异常',type: 'error',duration:500,position:'top',
					url: '/pages/user/user-list/user-list'
				})
			}
		},
		methods: {
			getData(){
				this.loading = true ;
				const field = "_id,userinfo,shop,technician,item,content,create_ip,create_date,extra_price,is_extra,level,stance";
				global.getOne('rate',{_id:this.uid},field).then(res => {
					let data = res.data;
					this.data = data;
					this.loading = false ;
				})
			},
			initMobile(mobile){
				return Util.formatPhoneNumber(mobile);
			},
			// 图片放大
			eventImage(image) {
				if(typeof image == 'string'){
					image = [image];
				}
				uni.previewImage({
					urls: image,
				});
			},
			onBack(){
				return	uni.navigateBack(1)
			},
		}
	}
</script>

<style>
	.util-button{
		padding:20px;
		display: flex;
		gap:20px;
		justify-content: center;
	}
	.bold{
		font-weight: 600;
	}
	.base-box{
		display: flex; 
		gap:10px;
		margin-bottom:10px;
	}
	.base{
		width: 50%;
	}
</style>
